---
type: tutorial
title: Adicione conteúdo dinâmico sobre você
description: |-
  Tutorial: Construa seu primeiro blog Astro —
  Utilize variáveis e renderização condicional em suas páginas Astro
i18nReady: true
---
import Checklist from '~/components/Checklist.astro';
import Spoiler from '~/components/Spoiler.astro';
import Blanks from '~/components/tutorial/Blanks.astro';
import Box from '~/components/tutorial/Box.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

Agora que você tem um website de múltiplas páginas com conteúdo HTML, é hora de adicionar um pouco de HTML dinâmico!

<PreCheck>
  - Definir o título da sua página no frontmatter, e usá-lo em seu HTML
  - Mostrar elementos HTML condicionalmente
  - Adicionar conteúdo sobre você
</PreCheck>

Qualquer arquivo HTML é válido na linguagem Astro. Porém, você pode fazer mais com Astro do que com apenas HTML regular!

## Defina e utilize uma variável

Abra `about.astro`, que deve se parecer com isso:

```astro title="src/pages/about.astro"
---
---
<html lang="pt-BR">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Astro</title>
  </head>
  <body>
    <a href="/">Início</a>
    <a href="/about/">Sobre</a>
    <a href="/blog/">Blog</a>
    <h1>Sobre Mim</h1>
    <h2>... e meu novo site Astro!</h2>

    <p>Estou resolvendo o tutorial introdutório do Astro. Esta é a segunda página no meu website, e é a primeira que eu mesmo construí!</p>

    <p>Este site será atualizado enquanto eu completo mais desse tutorial, então continue verificando e veja como minha jornada está indo!</p>
  </body>
</html>
```

<Steps>
1. Adicione a seguinte linha de JavaScript no script frontmatter, entre as **cercas de código**:

    ```astro title="src/pages/about.astro" ins={2}
    ---
    const pageTitle = "Sobre Mim";
    ---
    ```

2. Substitua ambos o título estático "Astro" e o cabeçalho "Sobre Mim" no seu HTML com a variável dinâmica `{pageTitle}`.

    ```astro title="src/pages/about.astro" del={5,12} ins={6,13}
    <html lang="pt-BR">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>Astro</title>
        <title>{pageTitle}</title>
      </head>
      <body>
        <a href="/">Início</a>
        <a href="/about/">Sobre</a>
        <a href="/blog/">Blog</a>
        <h1>Sobre Mim</h1>
        <h1>{pageTitle}</h1>
        <h2>... e meu novo site Astro!</h2>

        <p>Estou resolvendo o tutorial introdutório do Astro. Esta é a segunda página no meu website, e é a primeira que eu mesmo construí!</p>

        <p>Este site será atualizado enquanto eu completo mais desse tutorial, então continue verificando e veja como minha jornada está indo!</p>
      </body>
    </html>
    ```

3. Recarregue a pré-visualização da sua página `/about`.
  
    O texto da sua página deve parecer o mesmo, e o título da sua página mostrado na aba do seu navegador deve agora ter "Sobre Mim" ao invés de "Astro". 

    Ao invés de copiar o texto diretamente em tags HTML, você apenas **definiu e então utilizou uma variável** em duas seções do seu arquivo `.astro`, respectivamente.

4. Utilize o mesmo padrão para criar um valor de `pageTitle` para utilizar em `index.astro` ("Página Inicial") e `blog.astro` ("Meu Blog de Aprendizado sobre Astro"). Atualize o HTML dessas páginas em ambos os lugares para que o título da sua página corresponda com o cabeçalho mostrado em cada página.
</Steps>

:::note[Aprendizados]
1. **Defina** variáveis no seu script do Astro utilizando expressões do JavaScript ou TypeScript.
2. **Use** essas variáveis no seu template do Astro dentro de chaves `{ }` para dizer ao Astro que você está utilizando JavaScript.
:::

## Escreva expressões do JavaScript no Astro

<Steps>
1. Adicione o seguinte JavaScript ao seu frontmatter, entre as **cercas de código**:

      (Você pode customizar o código por si mesmo, mas este tutorial irá utilizar o seguinte exemplo.)

    ```astro title="src/pages/about.astro" ins={4-9, 11}
    ---
    const pageTitle = "Sobre Mim";

    const identify = {
      firstName: "Sarah",
      country: "Canadá",
      occupation: "Escritora Técnica",
      hobbies: ["fotografia", "observar pássaros", "beisebol"],
    };

    const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Escrever Documentação"];
    ---
    ```

2. Então, adicione o seguinte código ao seu template HTML, abaixo do seu conteúdo existente:

    ```astro title="src/pages/about.astro"
    <p>Aqui estão alguns fatos sobre mim:</p>
    <ul>
      <li>Meu nome é {identify.firstName}.</li>
      <li>Eu moro no {identify.country} e eu trabalho como uma {identify.occupation}.</li>
      {identify.hobbies.length >= 2 && 
        <li>Dois dos meus hobbies são: {identify.hobbies[0]} and {identify.hobbies[1]}</li>
      } 
    </ul>
    <p>Minhas habilidades são:</p>
    <ul>
      {skills.map((habilidade) => <li>{habilidade}</li>)}
    </ul>
    ```
</Steps>

:::note[Aprendizados]
1. Escrever um template Astro é muito parecido com **escrever HTML**, porém você pode incluir expressões do JavaScript nele.
2. O script frontmatter do Astro contém apenas JavaScript. 
3. Você pode utilizar todos os **operadores lógicos**, **expressões** e **funções** modernas do JavaScript em qualquer seção do seu arquivo `.astro`. Porém, chaves são necessárias (apenas) no corpo do template HTML.
:::

<Box icon="question-mark">

### Teste seu conhecimento

1. O frontmatter de um arquivo `.astro` é escrito em:

    <MultipleChoice>
        <Option>HTML</Option>
        <Option>YAML</Option>
        <Option isCorrect>JavaScript</Option>
    </MultipleChoice>

2. Em adição ao HTML, a sintaxe do Astro te permite incluir:

    <MultipleChoice>
        <Option isCorrect>Operadores lógicos, expressões e funções do JavaScript</Option>
        <Option>YAML</Option>
        <Option>Markdown</Option>
    </MultipleChoice>

3. Quando você precisa escrever seu JavaScript dentro de chaves?
    <MultipleChoice>
        <Option>
          Quando você não tem certeza que está correto.
        </Option>
        <Option isCorrect>
          Quando estiver dentro da seção de template HTML de um componente Astro.
          </Option>
        <Option>
          Entre as cercas de código de um componente Astro.
        </Option>
    </MultipleChoice>
</Box>

## Renderize elementos condicionalmente

Você também pode utilizar suas variáveis do script para escolher entre **renderizar ou não** elementos individuais do conteúdo do `<body>` do seu HTML.

<Steps>
1. Adicione as seguintes linhas ao seu script frontmatter para **definir variáveis**:

    ```astro title="src/pages/about.astro" ins={13-15}
    ---
    const pageTitle = "Sobre Mim";

    const identify = {
      firstName: "Sarah",
      country: "Canadá",
      occupation: "Escritora Técnica",
      hobbies: ["fotografia", "observar pássaros", "beisebol"],
    };

    const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Escrever Documentação"];

    const happy = true;
    const finished = false;
    const goal = 3;
    ---
    ```

2. Adicione as seguintes linhas abaixo do seus parágrafos existentes.

    Então, verifique a pré-visualização ao vivo na aba do seu navegador para ver o que é mostrado na página:

    ```astro title="src/pages/about.astro" /:|&&/ "?"
    {happy && <p>Estou feliz em estar aprendendo Astro!</p>}

    {finished && <p>Eu terminei esse tutorial!</p>}

    {goal === 3 ? <p>Minha meta é terminar em 3 dias.</p> : <p>Minha meta não é em 3 dias.</p>}
    ```

3. Faça commit das suas mudanças para o GitHub antes de seguir em frente. Faça isso sempre que quiser salvar o seu trabalho e atualizar seu website ao vivo.
</Steps>

:::tip
A sintaxe de template do Astro é similar a sintaxe do JSX. Se você estiver se perguntando como utilizar seu script no seu HTML, então pesquisar em como é feito no JSX é provavelmente um bom início!
:::



<Box icon="question-mark">

### Analise o Padrão

Dado o seguinte script `.astro`:

```astro title="src/pages/about.astro"
---
const sistemaOperacional = "Linux";
const quantidade = 3;
const calcado = "botas";
const estudante = false;
---
```


Para cada expressão do template Astro, você consegue prever o HTML (ou nenhum!) que será enviado ao navegador? Clique para revelar se você está certo!

1.  `<p>{sistemaOperacional}</p>`

    <p>
      <Spoiler>`<p>Linux</p>`</Spoiler>
    </p>

2.  `{estudante && <p>Ainda estou na escola.</p>}`

    <p>
      <Spoiler>Nada irá ser mostrado pois `estudante` equivale a false.</Spoiler>
    </p>

3.  `<p>Eu tenho {quantidade + 8} pares de {calcado}</p>`

    <p>
      <Spoiler>`<p>Eu tenho 11 pares de botas</p>`</Spoiler>
    </p>

4.  `{sistemaOperacional === "MacOS" ? <p>Estou utilizando um Mac.</p> : <p>Não estou utilizando um Mac.</p>}`

    <p>
      <Spoiler>`<p>Não estou utilizando um Mac.</p>`</Spoiler>
    </p>
</Box>


<Box icon="check-list">
## Checklist

<Checklist>
- [ ] Eu posso definir e utilizar valores em arquivos `.astro`.
- [ ] Eu posso renderizar elementos HTML condicionalmente.
</Checklist>
</Box>


### Recursos

- [Expressões dinâmicas no Astro](/pt-br/reference/astro-syntax/#expressões-parecidas-com-jsx)
